<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
h2,
p {
    margin: 0;
}    
.box {
    margin: 30px auto;
    width: 300px;    
}
#user,
#message {
    box-sizing: border-box;
    width: 300px;
    border: 1px solid #000;
    padding: 10px;
    height: 100px;
    resize: none;
    display: block;
}
#user {
    padding: 0 10px;
    height: 30px;
    margin-bottom: 10px;
}
#btn {
    display: block;
    margin: 10px auto;
    width: 60%;
    height: 40px;
}
#list {
    border-top: 1px solid #000;
    padding: 10px 0 0;
    margin: 0;
    list-style: none;
}
#list li {
    position: relative;
    font: 14px/30px "宋体";
    border-bottom: 1px solid #000;
    padding: 0 15px;
    overflow: hidden;
}
.clos {
    position: absolute;
    right: 5px;
    top: 10px;
}
.clos2 {
    position: absolute;
    right: 5px;
    top: 30px;
}
.replay{
    position:absolute;
    right: 5px;
    top: 35px;
}
.mask{
    width: 100vw;
    height: 100vh;
    background: black;
    opacity: .3;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}
.comfirm{
    width: 200px;
    height: 120px;
    background: white;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 30%;
    border-radius: 5px;
    transform: translate(-50%,-50%);
    overflow: hidden;
    display: none;
    
}
.comfirm button{
    /* position: absolute; */
    /* right: 10px; */
    float:right;
    margin-top: 20px;
    margin-right: 10px;
}

</style>
<script src="utils/ajax.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="box">
    <input type="text" id="user" value="小明" />
    <textarea id="message">我就是传说中的无敌小明</textarea>
    <button id="btn">提交留言</button>
    <ul id="list">
        <li style="height: auto">
            <h2 class="user">小王说:</h2>
            <p>呼叫无敌小明</p>
            
            <a href="javascript:;" class="clos">删除</a>
            <a href="javascript:;" class="clos2">回复</a>
        </li>
        <li style="height: auto">
            <h2 class="user">老师说:</h2>
            <p>小明滚出去</p>
            <p>回复的内容</p>
            <a href="javascript:;" class="clos">删除</a>
        </li>
    </ul>
	<div class="page">
		<span>1</span> <span>2</span> <span>3</span>
	</div>
	
	
</div>
<script>
/*
	姓名   message   relpay
	小明   我是小明   我是回复一,我是回复二,回复三


*/


// 通过ajax 获取数据 然后渲染到页面上；

// 获取ulELE
let ulEle = document.querySelector('#list');
let p = 1; // 当前页码 
// 根据页码显示 对应的数据




// 初始化的时候请求数据
getList();
function getList(){
	ajax({
		url:"./getlist.php",
		dataType:"json",
		data:{
			p
		},
		success(res){
			console.log(res);
			renderDom(res);
		}
	})
	
}



// 根据数据渲染视图 
function renderDom(data){
	ulEle.innerHTML = "";
	data.forEach(item=>{
		 var liEle = document.createElement("li");
		    liEle.style.height = "auto";
		    liEle.innerHTML = `<h2 class="user">${item.username}说:</h2>
		                        <p>${item.content}</p>
		                        <a href="javascript:;" class="clos" myid="${item.id}">删除</a>
		                        <div class="reply" style="display:none"><input type="text" /><button class="sure" myid="${item.id}">确定</button><button class="cancel">取消</button></div>
		                        <a href="javascript:;" class="clos2">回复</a>`;
			
			// 直接绑定删除事件 
			// 获取删除按钮
			// 生成 删除按钮的时候立刻绑定删除事件；
			let delEle = liEle.querySelector(".clos");
			delEle.onclick = function(){
				// console.log("点击了删除");
				let messageId = this.getAttribute("myid");
				// console.log(messageId);
				ajax({
					url:"del.php",
					method:"post",
					data:{
						messageId
					},
					dataType:"json",
					success(res){
						// console.log(res);
						if(res.status==1){
							getList();
						}
					}
				});
			}
			
			// 循环生成 回复的内容；
			item.replayList.forEach(item=>{
				let pEle = document.createElement("p");
				pEle.innerHTML = item.content;
				liEle.appendChild(pEle);
			})
			ulEle.appendChild(liEle);
			
			
			
			// 回复功能 
			var replyEle = liEle.querySelector(".clos2");
			    replyEle.onclick = function(){
			        this.style.display = "none";
			        this.previousElementSibling.style.display = "block";
			        // 获取取消按钮
			      var cancelEle =    liEle.querySelector(".cancel");
			      var that = this;
			    //   取消的时候点击事件
			      cancelEle.onclick = function(){
			        that.style.display = "block";
			        that.previousElementSibling.style.display = "none";
			      }
			
			    //   点击确定按钮
			    // 获取确定按钮
			    var sureEle = liEle.querySelector(".sure");
			    sureEle.onclick = function(){
			        let replyValue = this.previousElementSibling.value;
			        // console.log(replyValue);
			        // var pEle = document.createElement("p");
			        // pEle.innerHTML = replyValue;
			        // liEle.appendChild(pEle);
			        // that.style.display = "block";
			        // that.previousElementSibling.style.display = "none";
					console.log(replyValue)  // 回复的内容
					let mid = this.getAttribute("myid");
					ajax({
						url:"addReplay.php",
						dataType:"json",
						method:"post",
						data:{
							mid,
							replyValue
						},
						success(res){
							// console.log(res);
							if(res.status==1){
								getList();
							}
						}
						
					})
					
			    }
			    }
	})
	
}


// 添加功能 
var btnELe = document.querySelector("#btn");
var usernameEle = document.querySelector("#user");
var contentEle = document.querySelector("#message");
btnELe.onclick = function(){
    var username = usernameEle.value;
    var content = contentEle.value;
	// console.log(username,content);
	ajax({
		url:"addMessage.php",
		method:"post",
		data:{
			username,
			content
		},
		dataType:"json",
		success(res){
			// console.log(res);
			if(res.status==1){
				getList();
			}
		}
	})
}





// 问题一：分页数量？？  1.数据的总的数量 2.每页显示的数量   比如 21条 ---》每页显示5条  分页数量5  
// 获取分页数量 ；根据分页数量生成页码 ；
ajax({
	url:"getPage.php",
	dataType:"json",
	success(res){
		// console.log(res);
		let totalPage = res.totalPage;  //分页的数量；
		
		// 生成分页 ；
		let pageEle = document.querySelector(".page");
		pageEle.innerHTML = "";
		for(let i=1;i<=totalPage;i++){
			let span = document.createElement("span");
			span.innerHTML = i+" ";
			pageEle.appendChild(span);
			
			// 点击分页 ；
			span.onclick = function(){
				let page = this.innerText;
				console.log(p);
				p = page;
				getList();
			}
			
			
		}
		
		
		
		
	}
})




</script>
</body>
</html>